<template>
  <div class="about">
    <h1>我是地图</h1>
    <bmap
      ak="sGlmG23LqvclmtPdtSuGFeyECyOr49W6"
      class="map"
      @ready="handler"
      id="ditu"
    ></bmap>
  </div>
</template>

<script>
import bmap from 'vue-baidu-map/components/map/Map.vue';
import { reactive, ref } from '@vue/reactivity';
import { nextTick, onMounted } from '@vue/runtime-core';
export default {
  components: {
    bmap
  },
  setup() {
    // vue3只支持js引入
    let center = reactive({
      lng: 166.404,
      lat: 39.915
    });
    let zoom = ref(15);
    const handler = ({ BMap, map }) => {
      console.log(BMap, map);
      center.lng = 116.404;
      center.lat = 39.915;
      zoom.value = 15;
    };
    onMounted(() => {
      nextTick();
      let ditu = document.getElementById('ditu');
      ditu.center = center;
      ditu.zoom = zoom.value;
    });
    return {
      center,
      zoom,
      handler
    };
  }
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 600px;
}
</style>
